<template>
    <el-col :sm="24" :lg="16">
        <div class="grid-content bg-purple" :style="{backgroundColor:titleColor}">
            <div class="dev-title">详情</div>
        </div>
        <div class="col-bg clearfix">
            <el-form ref="form" :rules="edituser" :model="form" label-width="150px" style="margin:20px;width:60%;min-width:600px;">
                <el-form-item label="参数名:">
                    {{form.name}}
                </el-form-item>
                <el-form-item label="参数编码:">
                    {{form.coded}}
                </el-form-item>
                <el-form-item label="版本:">
                    {{form.version}}
                </el-form-item>
                <el-form-item label="大小:">
                    {{form.fileSize}}
                </el-form-item>
                <el-form-item label="类型:">
                    {{form.type}}
                </el-form-item>
                <el-form-item label="网关型号:">
                    {{form.serverTypeName}}
                </el-form-item>
                <el-form-item label="状态:">
                    {{form.state}}
                </el-form-item>
                <!-- <el-form-item label="path地址:">
                        <a :href="form.path" style="color:#3c8dbc">
                                {{form.path}}
                            </a>
                </el-form-item>

                <el-form-item label="ftpPath地址:">
                    {{form.ftpPath}}
                </el-form-item> -->
                <el-form-item label="备注:">
                    {{form.remark}}
                </el-form-item>


            </el-form>
        </div>
    </el-col>
</template>

<script>
    import {
        device_argument_get,
        company_update_my

    } from '../../../api/api';
    export default {
        data() {
            return {
                editLoading: false,
                form: {
                    // userName: '',
                    // phone: '',
                    // email: '',
                    // weixin: '',
                    // address: '',
                    // remark: ''
                },
                edituser: {
                    userName: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
                    phone: [{
                        required: true,
                        message: '请输入电话号码',
                        trigger: 'blur'
                    }],
                    email: [{
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    }],

                }
            }
        },
        computed:{
            buttonColor(){
                return this.$store.state.buttonColor
            },
            titleColor(){
                return this.$store.state.titleColor
            },
            dialogTitleColor(){
                return this.$store.state.dialogTitleColor
            },
        },
        methods: {
            getUsers() {
                let para = {
                    id: sessionStorage.getItem('communicate_details')
                }
                device_argument_get(para).then((res) => {

                     this.begCode(res.code,res.message);
                    if (res.code == 0) {
                        this.editLoading = false;
                        //NProgress.done();
                        if (res.data.state == 1) {
                            res.data.state = '启用';
                        } else {
                            res.data.state = "停用"
                        }
                        if (res.data.type == 1) {
                            res.data.type = '通信模块'
                        } else {
                            res.data.type = '设备';
                        }
                        if (res.data.serverType == 0) {
                            res.data.serverType = 'http';
                        } else {
                            res.data.serverType = 'ftp';
                        }
                        this.form = res.data;


                    }
                });
            },
            onSubmit() {
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.editLoading = true;
                    //NProgress.start();
                    let para = Object.assign({}, this.form);
                    company_update_my(para).then((res) => {
                         this.begCode(res.code,res.message);
                        if (res.code == 0) {
                            this.editLoading = false;
                            //NProgress.done();
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });

                            this.getUsers();
                        }
                    });
                });
            }
        },
        mounted() {
            this.getUsers();
        }
    }
</script>